<template>
  <client-only>
    <div class="in-wrap">
      <!-- 公共头引入 -->
      <header class="top">
        <div class="container">
          <!-- <h1>随心游</h1>
          <p>发行的是游戏 成就的是快乐</p> -->
          <a href="/">
            <img
              src="https://www.xclove.xyz/gameMallImg/logo.png"
              id="logo"
              alt=""
            />
          </a>
          <div>
            <button>下载游戏平台</button>
            <div v-if="userInfo">
              <a href="/personCenter">
                &nbsp;&nbsp;
                <i class="el-icon-user-solid"></i>
                {{ userInfo.userName }}</a
              >
              |
              <a href="#" @click.prevent="exit">退出</a>
            </div>
            <a href="/login" v-else>
              &nbsp;&nbsp;
              <i class="el-icon-user"></i>
              登录</a
            >
          </div>
        </div>
      </header>

      <!-- /公共头引入 -->
      <nuxt />

      <!-- 公共底引入 -->
      <footer>
        <div class="container">
          <h1 class="h1">随心游</h1>
          <div class="notice">
            <a href="#">公告</a>&nbsp; | &nbsp;
            <a href="#">关于蒸汽平台</a>&nbsp; | &nbsp;
            <a href="#">退款政策</a>&nbsp; | &nbsp;
            <a href="#">软件许可服务协议</a>&nbsp; | &nbsp;
            <a href="#">个人信息保护政策</a>&nbsp; | &nbsp;
            <a href="#">不良内容举报投诉</a>&nbsp; | &nbsp;
            <a href="#">侵权投诉</a>&nbsp; | &nbsp;
            <a href="#">家长监护</a>
          </div>
          <div class="copyright">
            <div class="chain_footer_valvelegal">
              © 2022 Valve Corporation 版权所有，已获授权。
            </div>
            <div class="chain_footer_pwlegal">
              <p>© 多媒体科技有限公司 版权所有。</p>

              <p>沪ICP备 17051673号-4</p>

              <p>增值电信业务经营许可证沪B2-20180406</p>

              <p>沪网文：(2017) 10175-769号</p>

              <p>联网备案号：沪公网安31011002005473号</p>
            </div>
            <div class="orCode">
              <img src="../assets/img/1.jpg" alt="" />
            </div>
          </div>
        </div>
      </footer>
      <!-- /公共底引入 -->
    </div>
  </client-only>
</template>
<script>
import "~/assets/css/reset.css";
import "~/assets/css/swiper-3.3.1.min.css";
import "~/assets/css/index.css";
import "~/assets/css/footer.css";
import Cookie from "js-cookie";
import loginApi from "/api/login";

export default {
  data() {
    return {
      title: "",
      userInfo: null,
    };
  },
  created() {
    this.initUserInfo();
    this.watchToken();
  },
  methods: {
    // 监听token是否过期
    watchToken() {
      if (Cookie.get("gameMall_token")) {
        loginApi.getUserInfo().then((res) => {
          // console.log(res);
          if (!res.isLogin) {
            Cookie.remove("gameMall_token");
            Cookie.remove("userInfo");
            this.userInfo = null;
            this.$message.error("登录过期,请您重新登陆");
          }
        });
      }
    },
    btn() {
      Cookies.set("title", this.title);
      //  当按钮按下后把true传过去
      Cookies.set("keyword", true);
      location.href = "/search";
    },
    // 初始化用户信息
    initUserInfo() {
      // 判断是否有登录
      if (Cookie.get("gameMall_token")) {
        // console.log(Cookie.get("userInfo"));
        // 将用户信息存储
        this.userInfo = JSON.parse(Cookie.get("userInfo"));
      }
    },
    // 退出
    exit() {
      // 敏感操作提醒
      this.$confirm("您确定要退出吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 清除cookie存储
        Cookie.remove("gameMall_token");
        Cookie.remove("userInfo");
        // 退出成功
        this.$message.success("退出成功");
        // 重新加载跳转至登录页
        location.href = "/login";
      });
    },
  },
};
</script>
<style scoped>
a:hover {
  text-decoration: none;
}

#top {
  width: 100%;
  height: 30px;
  background: #1b2838;
}
</style>